import React from 'react'
import { connect } from 'react-redux'
import Link from 'next/link'

class navMenu extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                <Link prefetch href="/">
                    <a className="name">I-blog</a>
                </Link>
                <Link prefetch href='/'>
                    <a>首页</a>
                </Link>
                {this.props.UserReducer.loginStatus === 2 ? <Link prefetch href='/collect'><a>收藏</a></Link> : null}
                {this.props.UserReducer.loginStatus === 2 ? <Link prefetch href='/me'><a>我的</a></Link> : null}
                <style jsx>{`
                    div {
                        flex: 1;
                    }
                    a {
                        display: inline-block;
                        margin: 0 0 0 40px;
                        color: #067df7;
                        text-decoration: none;
                        font-size: 14px;
                    }
                    .name {
                        margin: 0 0 0 50px;
                        font-size: 15px;
                        font-weight: bold;
                        color: black;
                    }
                    .name img {
                        width: 110px;
                        height: 65px;
                    }
                    @media (max-width: 720px){
                        a:not(.name) {
                            display: none
                        }
                    }
                `}</style>
            </div>
        )
    }
}

const mapStateToProps = ({ UserReducer }) => ({ UserReducer })
export default connect(mapStateToProps, null)(navMenu)